<template>
  <el-form class="productbox">
    <div class="step_box">
      <el-steps :active="active" finish-status="success" align-center>
        <el-step title="填写商品信息" />
        <el-step title="填写商品促销" />
        <el-step title="填写商品属性" />
        <el-step title="选择商品关联" />
      </el-steps>
    </div>

    <!-- 填写商品信息 -->
    <div v-show="active === 0">
      <ProductInfo />
    </div>
    <!-- 填写商品促销 -->
    <div v-show="active === 1">
      <ProductPromotion />
    </div>
    <!-- 填写商品属性 -->
    <div v-show="active === 2">
      <ProductProperties />
    </div>
    <!-- 填写商品属性 -->
    <div v-show="active === 3">
      <ProductAssociation />
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import { ref, provide, reactive } from "vue";
import ProductInfo from "./components/productInfo.vue";
import ProductPromotion from "./components/productPromotion.vue";
import ProductProperties from "./components/productProperties.vue";
import ProductAssociation from "./components/aroductAssociation.vue";

const active = ref(0);

const all = reactive({
  albumPics: "string",
  brandId: 0,
  brandName: "string",
  deleteStatus: 0,
  description: "string",
  detailDesc: "string",
  detailHtml: "string",
  detailMobileHtml: "string",
  detailTitle: "string",
  feightTemplateId: 0,
  giftGrowth: 0,
  giftPoint: 0,
  id: 0,
  keywords: "string",
  lowStock: 0,
  memberPriceList: [
    {
      id: 0,
      memberLevelId: 0,
      memberLevelName: "string",
      memberPrice: 0,
      productId: 0,
    },
  ],
  name: "string",
  newStatus: 0,
  note: "string",
  originalPrice: 0,
  pic: "string",
  prefrenceAreaProductRelationList: [
    {
      id: 0,
      prefrenceAreaId: 0,
      productId: 0,
    },
  ],
  previewStatus: 0,
  price: 0,
  productAttributeCategoryId: 0,
  productAttributeValueList: [
    {
      id: 0,
      productAttributeId: 0,
      productId: 0,
      value: "string",
    },
  ],
  productCategoryId: 0,
  productCategoryName: "string",
  productFullReductionList: [
    {
      fullPrice: 0,
      id: 0,
      productId: 0,
      reducePrice: 0,
    },
  ],
  productLadderList: [
    {
      count: 0,
      discount: 0,
      id: 0,
      price: 0,
      productId: 0,
    },
  ],
  productSn: "string",
  promotionEndTime: "2023-01-15T04:47:45.434Z",
  promotionPerLimit: 0,
  promotionPrice: 0,
  promotionStartTime: "2023-01-15T04:47:45.434Z",
  promotionType: 0,
  publishStatus: 0,
  recommandStatus: 0,
  sale: 0,
  serviceIds: "string",
  skuStockList: [
    {
      id: 0,
      lockStock: 0,
      lowStock: 0,
      pic: "string",
      price: 0,
      productId: 0,
      promotionPrice: 0,
      sale: 0,
      skuCode: "string",
      spData: "string",
      stock: 0,
    },
  ],
  sort: 0,
  stock: 0,
  subTitle: "string",
  subjectProductRelationList: [
    {
      id: 0,
      productId: 0,
      subjectId: 0,
    },
  ],
  unit: "string",
  usePointLimit: 0,
  verifyStatus: 0,
  weight: 0,
});
provide("all", all);
provide("active", active);
const next = () => {
  if (active.value++ > 2) active.value = 0;
};
</script>
<style lang="less" scoped>
.productbox {
  width: 720px;
  padding: 35px 35px 15px;
  margin: 20px auto;
  border-radius: 4px;
  border: 1px solid #ebeef5;
}
</style>
